<template>
  <el-card class="admin-header">
    <span class="span">服务中心</span>

    <el-menu
      class="el-icon-switch-button"
      mode="horizontal"
      @select="handleSelect">
      <el-submenu index="1">
        <template slot="title">欢迎用户:{{user.realName}}</template>
        <el-menu-item index="1" >修改个人信息</el-menu-item>
        <el-menu-item index="2" >退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <customer-info ref="Customerinfo" @reload="logout"/>
  </el-card>
</template>

<script>
import {createRouter} from '../../router'
import CustomerInfo from "./component/CustomerInfo";

export default {
  name: 'CustomerHead',
  components: {CustomerInfo},
  data() {
    return {
      user:''
    }
  },
  methods: {
    logout() {
      var _this = this
      this.$axios.get('/logout').then(resp => {
        if (resp && resp.data.code === 200) {
          _this.$store.commit('logout')
          _this.$router.replace('/index')
          // 清空路由，防止路由重复加载
          const newRouter = createRouter()
          _this.$router.matcher = newRouter.matcher
        }
      }).catch(failResponse => {
      })
    },
    handleSelect(key) {
      if(key==="1")
        this.$refs.Customerinfo.edit(this.user);
      if(key==="2")
        this.logout()
    },
  },
  mounted() {
    this.user = this.$store.state.user
  }
}
</script>

<style scoped>
.admin-header {
  height: 80px;
  opacity: 1.85;
  line-height: 40px;
  min-width: 900px;
  background: -webkit-linear-gradient(left, hsl(0deg 31% 31%), hsl(0deg 31% 31%), #f3f4f6) no-repeat
}

.el-icon-switch-button {
  cursor: pointer;
  outline: 0;
}

.span {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  color: #FFFFFF;
}

.el-icon-switch-button {
  font-size: 40px;
  float: right;
  background: -webkit-linear-gradient(left, rgb(222 216 218), rgb(231 227 229), rgb(243, 244, 248)) no-repeat
}
</style>
